<template>
    <el-card>
        <el-page-header @back="toBack" :icon="ArrowLeft" content="新增" />
        <el-divider border-style="color:#ffffff;" />
        <!-- 工作台 -->
        <div class="work-diy">
            <!-- 菜单栏 -->
            <div class="diy-menu">
                <div class="menu-title">
                    <span>组件库</span>
                </div>
                <div class="navs">
                    <div class="navs-group" v-for="(items,indexs) in diyList" :key="indexs">
                        <div class="title">{{items.title}}</div>
                        <div class="navs-components">
                            <div class="special" v-for="(item,index) in items.list" :key="index" @click="onSpecial(item)">
                                <i class="iconfont icon-picture-outline size-26"></i>
                                <span>{{item.name}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="action">
                    <el-button @click="onSubmit" type="primary" size="small">保存页面</el-button>
                </div>
            </div>
            <!--手机diy容器-->
            <div class="diy-phone">
                <!-- 页面头部 -->
                <div class="phone-top"
                 @click="onPhoneIndex(-1)"
                 :class="[phoneDiy.page.style.titleTextColor=='black'?'phone-black':'phone-white',phoneIndex==-1?'selected':'']" 
                 :style="{backgroundColor:phoneDiy.page.style.titleBackgroundColor,color:phoneDiy.page.style.titleTextColor}">
                    <h4>{{phoneDiy.page.params.title}}</h4>
                </div>
                <!-- 页面内容 -->
                <div class="phone-main" v-if="phoneMainShow">
                    <template v-for="(items,indexs) in phoneDiy.diy" :key="indexs">
                            <div class="drag optional" :data-itemid="indexs" :class="phoneIndex==indexs?'selected':''"  @click="onPhoneIndex(indexs)">
                                <template v-if="items.type=='imageSingle'">
                                    <!-- 单图 -->
                                    <div class="diy-imageSingle" v-for="(item,index) in items.data" :key="index">
                                        <div class="item-image" :style="{background:items.style.background,padding:items.style.paddingTop+'px '+items.style.paddingLeft+'px' }">
                                            <img :src="item.imgUrl" :alt="item.imgName" />
                                        </div>
                                    </div>
                                </template>
                                <template v-if="items.type=='video'">
                                    <!-- 视频 -->
                                    <div class="diy-video" :style="{padding:items.style.paddingTop+'px 0px' }">
                                        <video :style="{height:items.style.height+'px'}" :src="items.params.videoUrl" :poster="items.params.poster" controls="">
                                            您的浏览器不支持 video 标签
                                        </video>
                                    </div>
                                </template>
                                <template v-if="items.type=='banner'">
                                    <!-- 轮播 -->
                                    <div class="diy-banner">
                                        <img v-for="(item,index) in items.data" :key="index" :src="item.imgUrl" alt="" />
                                        <div class="dots " :class="items.style.btnShape">
                                            <span :style="{background:items.style.btnColor}" v-for="(item,index) in items.data" :key="index" ></span>
                                        </div>
                                    </div>
                                </template>
                                <template v-if="items.type=='window'">
                                    <!-- 图片橱窗 -->
                                    <div class="diy-window" :style="{background:items.style.background}">
                                        <ul class="data-list" :class="'am-avg-sm-'+items.style.layout">
                                            <li v-for="(item,index) in items.data" :key="index">
                                                <div class="item-image"  :style="{padding:items.style.paddingTop+'px '+items.style.paddingLeft+'px' }">
                                                    <img :src="item.imgUrl" alt="" />
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </template>
                                <template v-if="items.type=='blank'">
                                    <!-- 辅助空白 -->
                                    <div class="diy-blank" :style="{background:items.style.background,height:items.style.height+'px'}"></div>
                                </template>
                                <template v-if="items.type=='guide'">
                                    <!-- 辅助线 -->
                                    <div class="diy-guide" :style="{background:items.style.background,padding:items.style.paddingTop+'px '+items.style.paddingLeft+'px'}">
                                        <p :style="{height: '0px',width: '100%',borderTop: items.style.lineHeight+'px '+ items.style.lineStyle + ' '+ items.style.lineColor}"></p>
                                    </div>
                                </template>
                                <template v-if="items.type=='search'">
                                    <!-- 搜索框 -->
                                    <div class="diy-search">
                                        <div class="inner" :class="items.style.searchStyle">
                                            <div class="search-input" :class="items.style.textAlign=='left'?'textLeft':'textCenter'">
                                                <i class="iconfont icon-search"></i>
                                                <span class="search-text">{{items.params.placeholder}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                                <template v-if="items.type=='notice'">
                                    <!-- 公告组 -->
                                    <div class="diy-notice" :style="{background:items.style.background,padding:items.style.paddingTop+'px 10px'}">
                                        <div class="notice__icon">
                                            <img :src="items.params.icon">
                                        </div>
                                        <div class="notice__text text-truncate">
                                            <span :style="{color:items.style.textColor}">{{items.params.text}}</span>
                                        </div>
                                    </div>
                                </template>
                                <template v-if="items.type=='navBar'">
                                    <!-- 导航组 -->
                                    <div class="diy-navBar" :style="{background:items.style.background}">
                                        <ul :class="'am-avg-sm-'+items.style.rowsNum">
                                            <li v-for="(item,index) in items.data" :key="index">
                                                <div class="item-image">
                                                    <img :src="item.imgUrl" :title="item.imgName" alt="" />
                                                </div>
                                                <p class="item-text am-text-truncate" :style="{color:item.color}">{{item.text}}</p>
                                            </li>
                                        </ul>
                                    </div>
                                </template>
                                <template v-if="items.type=='richText'">
                                    <!-- 富文本 -->
                                    <div class="diy-richText" :style="{background:items.style.background,padding:items.style.paddingTop+'px '+items.style.paddingLeft+'px' }">
                                        <div v-html="items.params.content"></div>
                                    </div>
                                </template>
                                <div class="btn-edit-del">
                                    <div class="btn-del" @click.stop="onDel(indexs)">删除</div>
                                </div>
                            </div>
                    </template>
                </div>
            </div>
            <!-- 编辑器容器 -->
            <div class="diy-editor">
                <template v-if="phoneIndex==-1">
                    <div class="editor-title">
                            <span>页面设置</span>
                        </div>
                        <el-form class="tpl-form-line-form" :model="phoneDiy.page" size="mini" :rules="rules" ref="ruleFormRef" label-width="100px">
                            <el-form-item label="页面名称">
                                <el-input class="margin-left-sm" style="width: 400px" v-model="phoneDiy.page.params.name"  type="text" placeholder="请输入页面名称"></el-input>
                            </el-form-item>
                            <el-form-item label="页面标题">
                                <el-input class="margin-left-sm" style="width: 400px" v-model="phoneDiy.page.params.title"  type="text" placeholder="请输入页面标题"></el-input>
                            </el-form-item>
                            <el-form-item label="分享标题">
                                <el-input class="margin-left-sm" style="width: 400px" v-model="phoneDiy.page.params.share_title"  type="text" placeholder="请输入分享标题"></el-input>
                            </el-form-item>
                            <el-form-item label="标题栏文字">
                                <el-radio-group class="margin-left-sm" v-model="phoneDiy.page.style.titleTextColor">
                                    <el-radio label="white" size="small">白色</el-radio>
                                    <el-radio label="black" size="small">黑色</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="标题栏颜色">
                                <div class="margin-left-sm" style="width: 60%;">
                                    <el-color-picker v-model="phoneDiy.page.style.titleBackgroundColor" />
                                </div>
                            </el-form-item>
                            
                        </el-form>
                </template>
                <template v-else>
                        <div class="editor-title">
                            <span>{{phoneDiy.diy[phoneIndex].name}}</span>
                        </div>
                        <el-form class="tpl-form-line-form" :model="phoneDiy.diy[phoneIndex]" size="mini" :rules="rules" ref="ruleFormRef" label-width="100px">
                            <template v-if="phoneDiy.diy[phoneIndex].type=='imageSingle'">
                                <el-form-item label="上下边距">
                                    <div class="margin-left" style="width: 60%;">
                                        <el-slider  :min="0" :max="50" v-model="phoneDiy.diy[phoneIndex].style.paddingTop"  size="small" />
                                    </div>
                                    <div class="display-value">
                                        {{phoneDiy.diy[phoneIndex].style.paddingTop}}px (像素)
                                    </div>
                                </el-form-item>
                                <el-form-item label="左右边距">
                                    <div class="margin-left" style="width: 60%;">
                                        <el-slider  :min="0" :max="50" v-model="phoneDiy.diy[phoneIndex].style.paddingLeft"  size="small" />
                                    </div>
                                    <div class="display-value">
                                        {{phoneDiy.diy[phoneIndex].style.paddingLeft}}px (像素)
                                    </div>
                                </el-form-item>
                                <el-form-item label="背景颜色">
                                    <div class="margin-left-sm" style="width: 60%;">
                                        <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.background" />
                                    </div>
                                </el-form-item>
                                <el-form-item label-width="0px">
                                    <div class="form-items drag-img-box" v-if="dragImgBoxShow">
                                        <div class="form-item item-drag" v-for="(item,index) in phoneDiy.diy[phoneIndex].data" :key="index">
                                            <i v-if="index>0" @click="onClose(index)" class="iconfont icon-delete icon-error size-18"></i>
                                            <div class="item-inner">
                                                <div class="row">
                                                    <span class="label-tit">图片</span>
                                                    <img :src="item.imgUrl" @click="onFileShow(index)" class="choice-img" alt="" />
                                                </div>
                                                <div class="row">
                                                    <span class="label-tit">链接地址</span>
                                                    <el-input style="width: 400px" v-model="item.linkUrl"  type="text" placeholder="请输入链接地址"></el-input>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item label-width="0px">
                                    <el-button class="create" @click="onAdd(phoneDiy.diy[phoneIndex])" plain>添加一个</el-button>
                                </el-form-item>
                            </template>
                            <template v-if="phoneDiy.diy[phoneIndex].type=='video'">
                                <el-form-item label="上下边距">
                                    <div class="margin-left" style="width: 60%;">
                                        <el-slider :min="0" :max="50" v-model="phoneDiy.diy[phoneIndex].style.paddingTop"  size="small" />
                                    </div>
                                    <div class="display-value">
                                        {{phoneDiy.diy[phoneIndex].style.paddingTop}}px (像素)
                                    </div>
                                </el-form-item>
                                <el-form-item label="视频高度">
                                    <div class="margin-left" style="width: 60%;">
                                        <el-slider :min="50" :max="400" v-model="phoneDiy.diy[phoneIndex].style.height"  size="small" />
                                    </div>
                                    <div class="display-value">
                                        {{phoneDiy.diy[phoneIndex].style.height}}px (像素)
                                    </div>
                                </el-form-item>
                                <el-form-item label="视频封面">
                                    <div class="margin-left-sm">
                                        <img :src="phoneDiy.diy[phoneIndex].params.poster" @click="onFileShow(0)" class="choice-img" alt="" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="视频地址">
                                    <el-input class="margin-left-sm" style="width: 400px" v-model="phoneDiy.diy[phoneIndex].params.videoUrl"  type="text" placeholder="请输入分享标题"></el-input>
                                </el-form-item>
                            </template>
                            <template v-if="phoneDiy.diy[phoneIndex].type=='banner'">
                                <el-form-item label="指示点形状">
                                    <el-radio-group class="margin-left-sm" v-model="phoneDiy.diy[phoneIndex].style.btnShape">
                                        <el-radio label="round" size="small">圆形</el-radio>
                                        <el-radio label="rectangle" size="small">长方形</el-radio>
                                        <el-radio label="square" size="small">方形</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="指示点颜色">
                                    <div class="margin-left-sm" style="width: 60%;">
                                        <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.btnColor" />
                                    </div>
                                </el-form-item>
                                <el-form-item label-width="0px">
                                    <div class="form-items drag-img-box" v-if="dragImgBoxShow">
                                        <div class="form-item item-drag" v-for="(item,index) in phoneDiy.diy[phoneIndex].data" :key="index">
                                            <i v-if="index>0" @click="onClose(index)" class="iconfont icon-delete icon-error size-18"></i>
                                            <div class="item-inner">
                                                <div class="row">
                                                    <span class="label-tit">图片</span>
                                                    <img :src="item.imgUrl" @click="onFileShow(index)" class="choice-img" alt="" />
                                                </div>
                                                <div class="row">
                                                    <span class="label-tit">链接地址</span>
                                                    <el-input style="width: 400px" v-model="item.linkUrl"  type="text" placeholder="请输入链接地址"></el-input>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item label-width="0px">
                                    <el-button class="create" @click="onAdd(phoneDiy.diy[phoneIndex])" plain>添加一个</el-button>
                                </el-form-item>
                            </template>
                            <template v-if="phoneDiy.diy[phoneIndex].type=='window'">
                                <el-form-item label="上下边距">
                                    <div class="margin-left" style="width: 60%;">
                                        <el-slider  :min="0" :max="50" v-model="phoneDiy.diy[phoneIndex].style.paddingTop"  size="small" />
                                    </div>
                                    <div class="display-value">
                                        {{phoneDiy.diy[phoneIndex].style.paddingTop}}px (像素)
                                    </div>
                                </el-form-item>
                                <el-form-item label="左右边距">
                                    <div class="margin-left" style="width: 60%;">
                                        <el-slider  :min="0" :max="50" v-model="phoneDiy.diy[phoneIndex].style.paddingLeft"  size="small" />
                                    </div>
                                    <div class="display-value">
                                        {{phoneDiy.diy[phoneIndex].style.paddingLeft}}px (像素)
                                    </div>
                                </el-form-item>
                                <el-form-item label="背景颜色">
                                    <div class="margin-left-sm" style="width: 60%;">
                                        <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.background" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="布局方式">
                                    <el-radio-group class="margin-left-sm" v-model="phoneDiy.diy[phoneIndex].style.layout">
                                        <el-radio label="2" size="small">堆积两列</el-radio>
                                        <el-radio label="3" size="small">堆积三列</el-radio>
                                        <el-radio label="4" size="small">堆积四列</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label-width="0px">
                                    <div class="margin-left-lagre text-gray size-14">请确保所有图片的尺寸/比例相同</div>
                                    <div class="form-items drag-img-box" v-if="dragImgBoxShow">
                                        <div class="form-item item-drag" v-for="(item,index) in phoneDiy.diy[phoneIndex].data" :key="index">
                                            <i v-if="index>0" @click="onClose(index)" class="iconfont icon-delete icon-error size-18"></i>
                                            <div class="item-inner">
                                                <div class="row">
                                                    <span class="label-tit">图片</span>
                                                    <img :src="item.imgUrl"  @click="onFileShow(index)" class="choice-img" alt="" />
                                                </div>
                                                <div class="row">
                                                    <span class="label-tit">链接地址</span>
                                                    <el-input style="width: 400px" v-model="item.linkUrl"  type="text" placeholder="请输入链接地址"></el-input>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item label-width="0px">
                                    <el-button class="create" @click="onAdd(phoneDiy.diy[phoneIndex])" plain>添加一个</el-button>
                                </el-form-item>
                            </template>
                            <template v-if="phoneDiy.diy[phoneIndex].type=='blank'">
                                <el-form-item label="组件高度">
                                    <div class="margin-left" style="width: 60%;">
                                        <el-slider  :min="20" :max="200" v-model="phoneDiy.diy[phoneIndex].style.height"  size="small" />
                                    </div>
                                    <div class="display-value">
                                        {{phoneDiy.diy[phoneIndex].style.height}}px (像素)
                                    </div>
                                </el-form-item>
                                <el-form-item label="背景颜色">
                                    <div class="margin-left-sm" style="width: 60%;">
                                        <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.background" />
                                    </div>
                                </el-form-item>
                            </template>
                            <template v-if="phoneDiy.diy[phoneIndex].type=='guide'">
                                <el-form-item label="背景颜色">
                                    <div class="margin-left-sm" style="width: 60%;">
                                        <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.background" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="线条样式">
                                    <el-radio-group class="margin-left-sm" v-model="phoneDiy.diy[phoneIndex].style.lineStyle">
                                        <el-radio label="solid" size="small">实线</el-radio>
                                        <el-radio label="dashed" size="small">虚线</el-radio>
                                        <el-radio label="dotted" size="small">电线</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="线条颜色">
                                    <div class="margin-left-sm" style="width: 60%;">
                                        <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.lineColor" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="线条高度">
                                    <div class="margin-left" style="width: 60%;">
                                        <el-slider  :min="1" :max="10" v-model="phoneDiy.diy[phoneIndex].style.lineHeight"  size="small" />
                                    </div>
                                    <div class="display-value">
                                        {{phoneDiy.diy[phoneIndex].style.lineHeight}}px (像素)
                                    </div>
                                </el-form-item>
                                <el-form-item label="上下边距">
                                    <div class="margin-left" style="width: 60%;">
                                        <el-slider  :min="10" :max="100" v-model="phoneDiy.diy[phoneIndex].style.paddingTop"  size="small" />
                                    </div>
                                    <div class="display-value">
                                        {{phoneDiy.diy[phoneIndex].style.paddingTop}}px (像素)
                                    </div>
                                </el-form-item>
                                <el-form-item label="左右边距">
                                    <div class="margin-left" style="width: 60%;">
                                        <el-slider  :min="0" :max="100" v-model="phoneDiy.diy[phoneIndex].style.paddingLeft"  size="small" />
                                    </div>
                                    <div class="display-value">
                                        {{phoneDiy.diy[phoneIndex].style.paddingLeft}}px (像素)
                                    </div>
                                </el-form-item>
                            </template>
                            <template v-if="phoneDiy.diy[phoneIndex].type=='search'">
                                <el-form-item label="提示文字">
                                    <el-input class="margin-left-sm" style="width: 400px" v-model="phoneDiy.diy[phoneIndex].params.placeholder"  type="text" placeholder="请输入提示文字"></el-input>
                                </el-form-item>
                                <el-form-item label="搜索框样式">
                                    <el-radio-group class="margin-left-sm" v-model="phoneDiy.diy[phoneIndex].style.searchStyle">
                                        <el-radio label="square" size="small">方形</el-radio>
                                        <el-radio label="radius" size="small">圆角</el-radio>
                                        <el-radio label="round" size="small">弧角</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="文字对齐">
                                    <el-radio-group class="margin-left-sm" v-model="phoneDiy.diy[phoneIndex].style.textAlign">
                                        <el-radio label="left" size="small">居左</el-radio>
                                        <el-radio label="center" size="small">居中</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </template>
                            <template v-if="phoneDiy.diy[phoneIndex].type=='notice'">
                                <el-form-item label="上下边距">
                                    <div class="margin-left" style="width: 60%;">
                                        <el-slider  :min="0" :max="50" v-model="phoneDiy.diy[phoneIndex].style.paddingTop"  size="small" />
                                    </div>
                                    <div class="display-value">
                                        {{phoneDiy.diy[phoneIndex].style.paddingTop}}px (像素)
                                    </div>
                                </el-form-item>
                                <el-form-item label="背景颜色">
                                    <div class="margin-left-sm" style="width: 60%;">
                                        <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.background" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="文字颜色">
                                    <div class="margin-left-sm" style="width: 60%;">
                                        <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.textColor" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="文字图标">
                                    <img :src="phoneDiy.diy[phoneIndex].params.icon"  @click="onFileShow(1)" class="margin-left-sm choice-img" alt="" />
                                </el-form-item>
                                <el-form-item label="公告内容">
                                    <el-input class="margin-left-sm" style="width: 400px" v-model="phoneDiy.diy[phoneIndex].params.text"  type="text" placeholder="请输入提示文字"></el-input>
                                </el-form-item>
                            </template>
                            <template v-if="phoneDiy.diy[phoneIndex].type=='navBar'">
                                <el-form-item label="背景颜色">
                                    <div class="margin-left-sm" style="width: 60%;">
                                        <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.background" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="布局方式">
                                    <el-radio-group class="margin-left-sm" v-model="phoneDiy.diy[phoneIndex].style.rowsNum">
                                        <el-radio label="3" size="small">3个</el-radio>
                                        <el-radio label="4" size="small">4个</el-radio>
                                        <el-radio label="5" size="small">5个</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label-width="0px">
                                    <div class="form-items drag-img-box" v-if="dragImgBoxShow">
                                        <div class="form-item item-drag" v-for="(item,index) in phoneDiy.diy[phoneIndex].data" :key="index">
                                            <i v-if="index>0" @click="onClose(index)" class="iconfont icon-delete icon-error size-18"></i>
                                            <div class="item-inner">
                                                <div class="row">
                                                    <span class="label-tit">图片</span>
                                                    <div class="flex flex-direction">
                                                        <img :src="item.imgUrl" style="min-width:50px;min-height:50px;width:50px;" @click="onFileShow(index)" class="choice-img" alt="" />
                                                        <div class="help-block">
                                                            <small>建议尺寸100x100</small>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <span class="label-tit">文字内容</span>
                                                    <el-input style="width: 400px" v-model="item.text"  type="text" placeholder="请输入链接地址"></el-input>
                                                </div>
                                                <div class="row">
                                                    <span class="label-tit">文字颜色</span>
                                                    <el-color-picker v-model="item.color" />
                                                </div>
                                                <div class="row">
                                                    <span class="label-tit">链接地址</span>
                                                    <el-input style="width: 400px" v-model="item.linkUrl"  type="text" placeholder="请输入链接地址"></el-input>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item label-width="0px">
                                    <el-button class="create" @click="onAdd(phoneDiy.diy[phoneIndex])" plain>添加一个</el-button>
                                </el-form-item>
                            </template>
                            <template v-if="phoneDiy.diy[phoneIndex].type=='richText'">
                                <el-form-item label="上下边距">
                                    <div class="margin-left" style="width: 60%;">
                                        <el-slider  :min="10" :max="100" v-model="phoneDiy.diy[phoneIndex].style.paddingTop"  size="small" />
                                    </div>
                                    <div class="display-value">
                                        {{phoneDiy.diy[phoneIndex].style.paddingTop}}px (像素)
                                    </div>
                                </el-form-item>
                                <el-form-item label="左右边距">
                                    <div class="margin-left" style="width: 60%;">
                                        <el-slider  :min="0" :max="100" v-model="phoneDiy.diy[phoneIndex].style.paddingLeft"  size="small" />
                                    </div>
                                    <div class="display-value">
                                        {{phoneDiy.diy[phoneIndex].style.paddingLeft}}px (像素)
                                    </div>
                                </el-form-item>
                                <el-form-item label="背景颜色">
                                    <div class="margin-left-sm" style="width: 60%;">
                                        <el-color-picker v-model="phoneDiy.diy[phoneIndex].style.background" />
                                    </div>
                                </el-form-item>
                                <el-form-item label-width="0px">
                                    <!-- <vue3-tinymce v-model="phoneDiy.diy[phoneIndex].params.content" :setting="state.setting" /> -->
                                    <!-- <Editor @tContent="onParent" :msg="phoneDiy.diy[phoneIndex].params.content"></Editor> -->
                                </el-form-item>
                            </template>
                    </el-form>
                </template>
            </div>
        </div>
    </el-card>
    <!-- <FileList ref="fileListRef" @onFileFun="onParentFileFun"></FileList> -->
</template>
  
<script lang="ts" setup>
// import FileList from "@/components/fileList/index.vue";
import { ElNotification } from 'element-plus'
import { fromPwd, fromLength, fromPhone, fromNumber, fromRequired } from '@/common/fromRole';
import { ArrowLeft } from '@element-plus/icons-vue'
// import { useStore } from "vuex";
import { ref, reactive, onMounted,nextTick } from 'vue'
import { useRouter, useRoute, useLink } from "vue-router";
import useCurrentInstance from "@/common/useCurrentInstance";
// import Editor from '@/components/tinymce';
import diyList from "@/common/diy";
import Sortable from "sortablejs";
// import Vue3Tinymce from 'vue3-tinymce';
const { proxy } = useCurrentInstance();
// const { diyCreate } = proxy.$api.diy;
// const store = useStore();
// const token = store.state.app.token;
const token = "";
const router = useRouter();
const toBack = () => {
    router.back();
}
const action = ref('/admin/api/v1/upload/picture');
const state = reactive({
  setting: {
    height: 800,
    toolbar: 'undo redo | fullscreen | blocks alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontsize forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |',
    toolbar_mode: 'sliding',
    quickbars_selection_toolbar: 'removeformat | bold italic underline strikethrough | fontsize forecolor backcolor',
    plugins: 'link image media table lists fullscreen quickbars',
    font_size_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
    line_height_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px',
    link_default_target: '_blank',
    link_title: false,
    nonbreaking_force_tab: true,
    language: 'zh-Hans',
    language_url: 'https://unpkg.com/@jsdawn/vue3-tinymce@2.0.2/dist/tinymce/langs/zh-Hans.js',
    content_style: 'body{font-size: 16px}',
    // 自定义 图片上传模式
    custom_images_upload: true,
    images_upload_url: action,
    custom_images_upload_header:{'Access-Token':token},
    custom_images_upload_callback: (res:any) => {
        console.info(res);
        return res.data.url;
    },
    custom_images_upload_param: { id: '' },
  }
});

const phoneIndex = ref(-1);
const onPhoneIndex = (index:number)=>{
    phoneIndex.value=index;
    dragImgBoxDrag();
}
let  diy: Array < any > = [];
const phoneDiy= reactive({
    page:{
        type:"page",
        params:{
            name:"页面名称",
            title:"商城",
            share_title:"分享名称"
        },
        style:{
            titleTextColor:"white",
            titleBackgroundColor:"#ff8000"
        }
    },
    diy:diy
})
// 追加组件
const onSpecial = (event:any)=>{
    console.info(event);
    let obj=JSON.parse(JSON.stringify(event))
    phoneDiy.diy.push(obj);
    console.info(phoneDiy.diy.length);
    phoneIndex.value=phoneDiy.diy.length-1;
    dragImgBoxDrag();
}
// 删除
const onDel=(indexs:number)=>{
    console.info("删除");
    console.info('phoneDiy.diy.length');
    console.info('phoneIndex.value',phoneIndex.value);
    phoneDiy.diy.splice(indexs, 1);
    if(indexs==phoneIndex.value){
        const nextDiy =phoneDiy.diy[indexs] || phoneDiy.diy[indexs+1] || phoneDiy.diy[indexs-1];
        var key=phoneDiy.diy.indexOf(nextDiy);
        phoneIndex.value=key;
    }else{
        if(phoneDiy.diy.length>0){
            const next = phoneDiy.diy[phoneIndex.value];
            if(!next){
                if(phoneIndex.value!=-1)
                phoneIndex.value=phoneIndex.value-1;
            }
        }else{
            phoneIndex.value=-1;
        }
    }
}
const onAdd=(event:any)=>{
    console.info(event);
    let rows = {};
    diyList.forEach((items:any,indexs:any)=>{
        items.list.forEach((item:any)=>{
            if(item.type==event.type){
                rows=item.data[0];
            }
        })
    })
    phoneDiy.diy[phoneIndex.value].data.push(rows);
}
// 删除图片
const onClose =(indexs:number)=>{
    phoneDiy.diy[phoneIndex.value].data.splice(indexs, 1);
}

const onParent=(event:any)=>{
    console.info(event);
    phoneDiy.diy[phoneIndex.value].params.content=event;
}
const rules = reactive({

})
const ruleFormRef = ref(null)
const onSubmit = () => {
  console.log('onSubmit!');
  console.info(phoneDiy);
  const params = {
    name:phoneDiy.page.params.name,
    status: 'normal',
    page:JSON.stringify(phoneDiy.page),
    diy:JSON.stringify(phoneDiy.diy)
  }
  console.info(params);
//   diyCreate(params).then((response: any) => {
//     toBack()
//   }).catch((error: any) => {
//     console.info(error)
//   })
}

onMounted(()=>{
    phoneMainDrag();
})
// 添加移动
const phoneMainShow = ref(true);
const phoneMainDrag = () => {
    const wrapperTr = document.querySelector(".phone-main") as HTMLElement;
    Sortable.create(wrapperTr, {
        draggable: ".drag",
        animation: 180,
        delay: 0,
        onEnd: (evt:any) => {
            const currentRow = phoneDiy.diy.splice(evt.oldIndex, 1);
            phoneDiy.diy.splice(evt.newIndex, 0, currentRow[0]);
            phoneMainShow.value=false;
            if(evt.oldIndex==phoneIndex.value){
                phoneIndex.value=evt.newIndex;
            }
            nextTick(() => {
                phoneMainShow.value=true;
                nextTick(() => {
                    phoneMainDrag();
                })
            });
        }
    });
}

const dragImgBoxShow = ref(true);
const dragImgBoxDrag = () => {
    if(phoneIndex.value==-1)return;
    if(['imageSingle','banner','window','navBar'].includes(phoneDiy.diy[phoneIndex.value].type)===false)return;
    nextTick(() => {
        const wrapper = document.querySelector(".drag-img-box") as HTMLElement;
        Sortable.create(wrapper, {
            draggable: ".item-drag",
            animation: 180,
            delay: 0,
            onEnd: (evt:any) => {
                const currentRow = phoneDiy.diy[phoneIndex.value].data.splice(evt.oldIndex, 1);
                phoneDiy.diy[phoneIndex.value].data.splice(evt.newIndex, 0, currentRow[0]);
                dragImgBoxShow.value=false;
                nextTick(() => {
                    dragImgBoxShow.value=true;
                    nextTick(() => {
                        dragImgBoxDrag();
                    })
                });
            }
        });
    })
}
// const fileListRef = ref();
// const fileIndex = ref(0);
// const onFileShow = (index:any) => {
//     fileIndex.value=index;
//     fileListRef.value.onShow();
// }
const onParentFileFun = (event:any)=>{
    console.info(phoneDiy.diy[phoneIndex.value]);
    if(phoneDiy.diy[phoneIndex.value].type=='video'){
        phoneDiy.diy[phoneIndex.value].params.poster=event[0].url;
    }else if(phoneDiy.diy[phoneIndex.value].type=='notice'){
        phoneDiy.diy[phoneIndex.value].params.icon=event[0].url;
    }else{
        phoneDiy.diy[phoneIndex.value].data[fileIndex.value].imgUrl=event[0].url;
    }
}
</script>

<style lang="scss" scoped>
.work-diy {
    padding: 20px 0;
    display: flex;
    align-items: flex-start;
    // justify-content: space-around;
    // justify-content: space-between;
    
    // 菜单栏
    .diy-menu{
        margin-left: 20px;
        width: 285px;
        min-width: 285px;
        height: auto;
        border: 1px solid #ddd;
        padding: 15px 10px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        user-select: none;
        .menu-title{
            position: relative;
            padding: 0 22px;
            height: 30px;
            border-bottom: 1px solid #eef1f5;
        }
        .menu-title::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 13px;
            background: #00aeff;
            top: 8px;
            left: 9px;
        }
        .navs{
            .navs-group{
                .title{
                    font-size: 0.24rem;
                    margin: 10px 10px 5px 10px;
                }
                .navs-components{
                    display: flex;
                    flex-wrap: wrap;
                    padding: 0px 5px 5px 5px;
                    border-bottom: 1px dotted #ddd;
                    .special{
                        width: 74px;
                        height: 74px;
                        padding: 3px 0;
                        margin: 5px;
                        border: 1px solid #dddddd;
                        text-align: center;
                        font-size: 12px;
                        border-radius: 4px;
                        cursor: pointer;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        .iconfont{
                            margin-right: 0px;
                        }
                        img{
                            width: 48px;
                            height: 48px;
                        }
                        span{
                            margin-top: 8px;
                        }
                    }
                    .special:hover {
                        // background: #fff;
                        background:var(--el-card-border-color);
                    }
                }
            }
        }
        
        .action{
            margin-top: 15px;
            text-align: right;
            position: relative;
        }
    }
    // 手机diy容器
    .diy-phone{
        margin-left: 20px;
        width: 330px;
        min-width: 330px;
        border-radius: 3px;
        box-shadow: 0 3px 10px #dcdcdc;
        border: 1px solid #ddd;
        .phone-top{
            width: 100%;
            height: 66px;
            text-align: center;
            h4 {
                margin: 0;
                font-weight: normal;
                white-space: nowrap;
                line-height: 88px;
            }
        }
        .phone-top:before{
            cursor: pointer !important;
        }
        .phone-black{
            background-image: url("@/assets/diy/phone-top-black.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        .phone-white{
            background-image: url("@/assets/diy/phone-top-white.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        .phone-main{
            height: 540px;
            border-top: 0;
            overflow-y: auto;
            user-select: none;
            position: relative;
            .btn-edit-del{
                display: none;
            }
            .optional:hover{
                position: relative;
                .btn-edit-del{
                    display: block;
                    height: 16px;
                    position: absolute;
                    right: 2px;
                    bottom: 2px;
                    z-index: 90;
                    .btn-del{
                        width: 32px;
                        height: 16px;
                        line-height: 16px;
                        text-align: center;
                        font-size: 10px;
                        color: #fff;
                        background: rgba(0, 0, 0, 0.4);
                        margin-left: 2px;
                        cursor: pointer;
                        position: relative;
                        z-index: 11;
                    }
                }
            }
            .optional:hover:before{
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border: 2px dashed #00a0e9;
                cursor: move;
                z-index: 10;
            }
            .drag{
                display: block;
                overflow: hidden;
                font-size: 1rem;
                // 单图
                .diy-imageSingle{
                    display: block;
                    margin: 0;
                    padding: 0;
                    height: auto;
                    overflow: hidden;
                    img{
                        display: block;
                        width: 100%;
                    }
                }
                // 视频
                .diy-video{
                    video{
                        display: block;
                        width: 100%;
                    }
                }
                // 轮播
                .diy-banner{
                    display: block;
                    margin: 0;
                    padding: 0;
                    height: auto;
                    overflow: hidden;
                    position: relative;
                    max-height: 200px;
                    img {
                        display: none;
                        width: 100%;
                    }
                    img:first-child {
                        display: block;
                    }
                    .dots{
                        height: 14px;
                        padding: 0 10px;
                        position: absolute;
                        left: 0;
                        right: 0;
                        bottom: 10px;
                        opacity: 0.8;
                        text-align: center;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    .round span{
                        display: inline-block;
                        height: 10px;
                        width: 10px;
                        border-radius: 10px;
                        background-color: #fff;
                        margin-left: 5px;
                    }
                    .rectangle span{
                        display: inline-block;
                        height: 10px;
                        width: 16px;
                        background-color: #fff;
                        margin-left: 5px;
                    }
                    .square span{
                        display: inline-block;
                        height: 10px;
                        width: 10px;
                        background-color: #fff;
                        margin-left: 5px;
                    }
                }
                // 图片橱窗
                .diy-window{
                    overflow: hidden;
                    ul, li {
                        list-style: none;
                        padding: 0;
                        margin: 0;
                    }
                    .item-image{
                        img {
                            width: 100%;
                            box-sizing: border-box;
                            vertical-align: middle;
                            border: 0;
                        }
                    }
                    .am-avg-sm-2{
                        li{
                            list-style: none;
                            display: block;
                            height: auto;
                            float: left;
                        }
                        li:nth-of-type(2n+1) {
                            clear: both;
                        }
                        li:nth-of-type(n) {
                            clear: none;
                        }
                        li {
                            width: 50%;
                        }
                    }
                    .am-avg-sm-3{
                        li{
                            list-style: none;
                            display: block;
                            height: auto;
                            float: left;
                        }
                        li:nth-of-type(3n+1) {
                            clear: both;
                        }
                        li:nth-of-type(n) {
                            clear: none;
                        }
                        li {
                            width: 33.33333333%;
                        }
                    }
                    .am-avg-sm-4{
                        li{
                            list-style: none;
                            display: block;
                            height: auto;
                            float: left;
                        }
                        li:nth-of-type(3n+1) {
                            clear: both;
                        }
                        li:nth-of-type(n) {
                            clear: none;
                        }
                        li {
                            width: 25%;
                        }
                    }
                }
                // 搜索框
                .diy-search{
                    background: #f1f1f2;
                    padding: 10px 10px;
                    .inner{
                        height: 30px;
                        background: #fff;
                        overflow: hidden;
                        .search-input{
                            height: 30px;
                            width: 100%;
                            line-height: 30px;
                            color: #999999;
                            padding: 0 10px;
                            display: flex;
                            .icon-search{
                                font-size: 16px;
                            }
                            .search-text{
                                font-size: 14px;
                                margin-left: 2px;
                            }
                        }
                        .textLeft{
                            justify-content: flex-start;
                        }
                        .textCenter{
                            justify-content: center;
                        }
                    }
                    .square{
                        border-radius: 0px;
                    }
                    .radius {
                        border-radius: 5px;
                    }
                    .round{
                        border-radius: 30px;
                    }
                }
                // 公告组
                .diy-notice{
                    padding: 4px 10px;
                    line-height: 26px;
                    display: flex;
                    align-items: center;
                    .notice__icon{
                        min-width: 20px;
                        width: 20px;
                        height: 20px;
                        img{
                            width: 20px;
                            height: 20px;
                        }
                    }
                    .notice__text{
                        flex: 1;
                        padding-left: 5px;
                        span{
                            font-size: 14px;
                        }
                    }
                    .text-truncate{
                        word-wrap: normal;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                    }
                    
                }
                // 导航组
                .diy-navBar{
                    overflow: hidden;
                    .am-avg-sm-3{
                        display: block;
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        li{
                            margin: 10px 0;
                            list-style: none;
                            display: block;
                            height: auto;
                            float: left;
                        }
                        li:nth-of-type(3n+1) {
                            clear: both;
                        }
                        li:nth-of-type(n) {
                            clear: none;
                        }
                        li {
                            width: 33.33333333%;
                        }
                    }
                    .am-avg-sm-4{
                        display: block;
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        li{
                            margin: 10px 0;
                            list-style: none;
                            display: block;
                            height: auto;
                            float: left;
                        }
                        li:nth-of-type(3n+1) {
                            clear: both;
                        }
                        li:nth-of-type(n) {
                            clear: none;
                        }
                        li {
                            width: 25%;
                        }
                    }
                    .am-avg-sm-5{
                        display: block;
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        li{
                            margin: 10px 0;
                            list-style: none;
                            display: block;
                            height: auto;
                            float: left;
                        }
                        li:nth-of-type(3n+1) {
                            clear: both;
                        }
                        li:nth-of-type(n) {
                            clear: none;
                        }
                        li {
                            width: 20%;
                        }
                    }
                    .item-image{
                        text-align: center;
                        margin-bottom: 4px;
                        
                        img{
                            height: 44px;
                            width: 44px;
                            border-radius: 50%;
                        }
                    }
                    .item-text{
                        padding: 0px 10px;
                        font-size: 14px;
                        text-align: center;
                        word-wrap: normal;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                    }
                }
                
            }   
        }
        .selected{
            position: relative;
            .btn-edit-del{
                display: block;
                height: 16px;
                position: absolute;
                right: 2px;
                bottom: 2px;
                z-index: 90;
                .btn-del{
                    width: 32px;
                    height: 16px;
                    line-height: 16px;
                    text-align: center;
                    font-size: 10px;
                    color: #fff;
                    background: rgba(0, 0, 0, 0.4);
                    margin-left: 2px;
                    cursor: pointer;
                    position: relative;
                    z-index: 11;
                }
            }
        }
        .selected:before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: 2px dashed #00a0e9;
            cursor: move;
            z-index: 10;
        }
    }
    // 编辑器容器
    .diy-editor{
        margin-left: 20px;
        width: 450px;
        min-width: 450px;
        height: auto;
        min-height: 100px;
        padding: 10px 10px;
        border: 1px solid #ddd;
        .editor-title{
            position: relative;
            padding: 0 22px;
            height: 30px;
            border-bottom: 1px solid #eef1f5;
            margin-bottom: 10px;
        }
        .editor-title::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 13px;
            background: #00aeff;
            top: 8px;
            left: 9px;
        }
        .el-form-item{
            margin-bottom: 10px;
        }
        .diy-richText{
            font-size: 1rem;
        }
        .tpl-form-line-form{
            overflow-y: auto;
            height: 560px;
            user-select: none;
            font-size: 1.3rem !important;
            color: #656565;
            .choice-img{
                max-width: 220px;
                height: 50px;
                cursor: pointer;
            }
            .icon-img{
                max-width: 64px;
                width: 64px;
                height: 64px;
            }
            .form-items{
                height: auto;
                padding: 5px 6px;
                display: inline-block;
                width: 100%;
                .form-item{
                    // background: #f7fafc;
                    margin: 0rem 1.6rem 0.6rem 1.6rem;
                    position: relative;
                    border-radius: 3px;
                    cursor: move;
                    .icon-delete{
                        margin-right: 0px;
                        width: 2rem;
                        height: 2rem;
                        position: absolute;
                        top: -15px;
                        right: -12px;
                        text-align: center;
                        cursor: pointer;
                        -webkit-transition: background-color .3s ease-out, border-color .3s ease-out;
                        transition: background-color .3s ease-out, border-color .3s ease-out;
                    }
                    .item-inner{
                        display: flex;
                        flex-direction: column;
                        padding: 0.8rem 0.8rem 1.2rem 0.8rem;
                        // background: #f7fafc;
                        box-shadow: var(--el-box-shadow-light);
                        .row{
                            display: flex;
                            align-items: center;
                            margin-top: 0.8rem;
                            .label-tit{
                                width: 70px;
                                display: inline-flex;
                                justify-content: flex-end;
                                align-items: flex-start;
                                flex: 0 0 auto;
                                font-size: 14px;
                                color: #606266;
                                height: 32px;
                                font-weight: bold;
                                line-height: 32px;
                                padding: 0 12px 0 0;
                                box-sizing: border-box;
                            }
                            
                        }
                    }
                }
            }
            .create{
                width: 100%;
                display: flex;
                margin: 0px 1.8rem;
            }
        }
        .display-value{
            display: inline-block;
            margin-left: 0.8rem;
        }
    }
}
</style>